<template>
  <view class="container">
    <view class="banner">
      <image class="logo" src="../../static/logoall3.png"></image>
      <text class="slogan">欢迎加入我们</text>
      <text class="sub-slogan">共创美好明天</text>
    </view>
    <view class="content">
      <text class="title">为什么选择我们？</text>
      <text class="description">我们是一家致力于提供优质服务的公司，我们拥有丰富的经验和专业团队，您将会获得以下好处：</text>
      <view class="benefits">
        <view class="benefit">
          <image class="icon" src="../../static/logoall3.png"></image>
          <text class="benefit-title">创新理念</text>
          <text class="benefit-description">我们将生活中的废弃物进行回收利用，使它们有新的价值。</text>
        </view>
        <view class="benefit">
          <image class="icon" src="../../static/logoall3.png"></image>
          <text class="benefit-title">专业团队</text>
          <text class="benefit-description">我们的团队由经验丰富、技术精湛的专业人员组成，确保为您提供最好的服务。</text>
        </view>
        <view class="benefit">
          <image class="icon" src="../../static/logoall3.png"></image>
          <text class="benefit-title">优质服务</text>
          <text class="benefit-description">我们提供全方位的加盟支持，确保您在合作过程中得到及时帮助。</text>
        </view>
      </view>
	  <view class="link">
	  	<text class="contact-info">联系方式：</text>
      <view class="contact">

        <text class="contact-detail">电话：123456789</text>
      </view>
      <view class="contact">

        <text class="contact-detail">邮箱：example@example.com</text>
      </view>
    </view>
	  </view>
      
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style>
.container {
  position: relative; /* 设置容器为相对定位 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.container::before {
  content: "";
  position: absolute; /* 设置伪元素为绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(240, 248, 255, 0); /* 设置背景颜色及透明度 */
  z-index: -1; /* 将伪元素置于下方，使其不遮挡内容 */
}

.container::after {
  content: ""; /* 如果需要，也可以为背景图片的伪元素设置透明度 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../static/关于背景3.jpg);
  opacity: 0.8; /* 设置透明度 */
  z-index: -2; /* 将伪元素置于最底部 */
}


.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40rpx;
}

.logo {
  width: 200rpx;
  height: 200rpx;
}

.slogan {
	font-weight: bold;
  font-size: 36rpx;
  color: #333;
  margin-top: 20rpx;
}

.sub-slogan {

  font-size: 28rpx;

  margin-top: 10rpx;
}

.content {
  margin-top: 60rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.description {
  font-size: 28rpx;

  margin-top: 20rpx;
}

.benefits {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33.3%;
}

.icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 10rpx;
}

.benefit-title {
  font-size: 28rpx;
  color: #333;
  margin-top: 10rpx;
  font-weight: bold;
}

.benefit-description {
  font-size: 24rpx;

  text-align: center;
  margin-top: 10rpx;
}
.link{
	padding-top: 50rpx;
}
.contact-info {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-top: 40rpx;
}

.contact {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.contact-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.contact-detail {
  font-size: 28rpx;

}
</style>
